<template>
    <div class="home">
        <SearchBar></SearchBar>
        <div class="row1">
            <Row1></Row1>
        </div>
        <div class="row2">
            <Row2></Row2>
        </div>
        <div class="row3">
            <Row3></Row3>
        </div>
        <div class="bottom">
            <div class="bottomItem">
                <SvgIcon icon="icon-xingzhuangcheng" class="icon"></SvgIcon>
                <div class="text" style="color: orangered;">首页</div>
            </div>
            <div class="bottomItem">
                <SvgIcon icon="icon-fenlei1" class="icon"></SvgIcon>
                <div class="text">分类</div>
            </div>
            <div class="bottomItem" @click="$router.push('/shopcart')">
                <div class="tag" v-if="$store.state.shopcart.shopcartItems.length">
                    {{$store.state.shopcart.shopcartItems.length}}
                </div>
                <SvgIcon icon="icon-gouwuche1" class="icon"></SvgIcon>
                <div class="text">购物车</div>
            </div>
            <div class="bottomItem" @click="$router.push('/myself')">
                <SvgIcon icon="icon-geren" class="icon"></SvgIcon>
                <div class="text">个人</div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .home {
        background: aliceblue;
        width: 100%;
        height: 100%;
    }

    .row1 {
        margin-top: px2rem(10);
        background: #fff;
    }

    .row2 {
        margin-top: px2rem(10);
        background: #fff;
    }

    .row3 {
        margin-top: px2rem(10);
        background: #fff;
    }

    .bottom {
        display: flex;
        justify-content: space-between;
        padding-left: px2rem(40);
        padding-right: px2rem(40);
        padding-top: px2rem(20);
        padding-bottom: px2rem(20);
        position: fixed;
        bottom: 0;
        max-width: 750px;
        width: 100%;
        border-top: 1px solid #eee;
        background: #fff;
        .bottomItem {
            position: relative;
            text-align: center;
            .tag {
                position: absolute;
                top: -10px;
                right: -10px;
                width: 20px;
                height: 20px;
                background: red;
                color: #fff;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .icon {
                font-size: 20px
            }
        }

    }
</style>
<script>
    var SearchBar = () => import( '../../components/searchBar')
    var Row1 = () => import( './row1')
    var Row2 = () => import( './row2')
    var Row3 = () => import( './row3')
    import {getFav} from "./service";
    import withStore from "../../vuex/withStore";

    var SvgIcon = () => import ('../../components/svgIcon')
    import {get_shop_cart_items} from "../product/shopcartModal/service";

    export default withStore({
        components: {
            SearchBar, Row1, Row2, Row3, SvgIcon
        },
        mounted() {
            /*初始化 获取 favList*/
            var self = this
            var favs = self.getStore("fav.favList") || []
            if (favs.length == 0) {
                getFav().then(favList => {
                    self.setStore('fav.favList', favList)
                })
            }
            /*获取shop cart*/
            get_shop_cart_items().then(shopcartItem => {
                self.setStore("shopcart.shopcartItem", shopcartItem)
            })
        },
    })
</script>